<script setup>
import headerBar from '@/components/header/index.vue'
import footerBar from '@/components/footer/index.vue'
import { ref } from 'vue';
import { bannerlist } from '@/api/index';
import { studystatistics,studyhotlist,studyrecommendlist,studyfriendlist,studycollect } from '@/api/study';

const checkList = ref(['默认'])
const swiperList = ref([]);
const studystatisticsinfo = ref('');
const studyhotlistinfo = ref([]);
const studyrecommendlistinfo = ref([]);
const studyfriendlistinfo = ref([]);
// 轮播图
const getbannerlist = () => {
	let params = {
		"data": {
			"bannertype": 3
		}
	}
	bannerlist(params).then(res => {
		swiperList.value = res.data.bannerlist;
	})
}
getbannerlist();
const getstudystatistics = () => {
	let params = {
		"data": {}
	}
	studystatistics(params).then(res => {
		studystatisticsinfo.value = res.data;
		console.log(res);
	})
}
getstudystatistics();
const getstudyhotlist = () => {
	let params = {
		"data": {}
	}
	studyhotlist(params).then(res => {
		studyhotlistinfo.value = res.data.studyhotlist;
		console.log(res);
	})
}
getstudyhotlist(); //studyrecommendlist
const getstudyrecommendlist = () => {
	let params = {
		"data": {}
	}
	studyrecommendlist(params).then(res => {
		studyrecommendlistinfo.value = res.data.studyrecommendlist;
		console.log(res);
	})
}
getstudyrecommendlist();
const freshstudy = ()=>{
	getstudyrecommendlist();
	getstudyhotlist();
}
const getstudyfriendlist = () => {
	let params = {
		"data": {}
	}
	studyfriendlist(params).then(res => {
		studyfriendlistinfo.value = res.data.studyfriendlist;
		console.log(res);
	})
}
getstudyfriendlist();
const collect = (obj)=>{
	let params = {
		"data": {
			"iscollect": obj.iscollect===1?0:1,
			"studyid": obj.studyid
		}
	}
	studycollect(params).then(res => {
		getstudyfriendlist();
	})
}
</script>
<template>
	<div class="container">
		<header-bar :index="2"></header-bar>
		<div class="swiper">
			<el-carousel height="688px">
				<el-carousel-item v-for="(item, index) in swiperList" :key="index">
					<a :href="item.bannerhref" target="_blank" class="carousel">
						<img :src="item.bannerurl" alt="">
					</a>
				</el-carousel-item>
			</el-carousel>
		</div>
		<div class="module-container">
			<div class="module-number">
				<div class="module-number-item">
					<div class="module-number-num1">{{ studystatisticsinfo.aiadd }}</div>
					<div class="module-number-num2">{{ studystatisticsinfo.aiadd }}</div>
					<div class="module-number-desc">今日新增/累计学时数</div>
				</div>
				<div class="module-number-item">
					<div class="module-number-num1">{{ studystatisticsinfo.courseadd }}</div>
					<div class="module-number-num2">{{ studystatisticsinfo.coursecumulative }}</div>
					<div class="module-number-desc">今日新增/累计学时数</div>
				</div>
				<div class="module-number-item">
					<div class="module-number-num1">{{ studystatisticsinfo.knowledgeadd }}</div>
					<div class="module-number-num2">{{ studystatisticsinfo.knowledgecumulative }}</div>
					<div class="module-number-desc">今日新增/累计学时数</div>
				</div>
				<div class="module-number-item">
					<div class="module-number-num1">{{ studystatisticsinfo.learningadd }}</div>
					<div class="module-number-num2">{{ studystatisticsinfo.learningcumulative }}</div>
					<div class="module-number-desc">今日新增/累计学时数</div>
				</div>
			</div>
			<div class="module-one">
				<div>
					<div class="module-one-header">
						<div class="fresh" @click="freshstudy">
							<span>学习热点刷一刷</span>
							<i></i>
						</div>
					</div>
				</div>
				<div class="module-one-body">
					<div class="module-one-item module-one-item-type1"
					 	v-for="(item,index) in studyrecommendlistinfo" :key="index">
						<div class="module-one-img" v-if="(index+1)%4===1||(index+1)%4===2">
							<img :src="item.studythumbnail" alt="">
						</div>
						<div class="module-one-text">
							<div class="module-one-title">{{item.studyname}}</div>
							<div class="module-one-desc">
								{{item.studyabstract}}
							</div>
							<div class="module-one-comment">
								{{ item.comment }}
							</div>
						</div>
						<div class="module-one-img" v-if="(index+1)%4===3||(index+1)%4===0">
							<img :src="item.studythumbnail" alt="">
						</div>
						<div class="module-one-tags">
							<span v-for="(val,key) in item.labellist" :key="key">
								{{ val.labelname }}
							</span>
						</div>
						<div class="module-one-bottom">
							<div class="module-one-hot">
								<span>热度：</span>
								<i v-for="(val,key) in (item.studyhot>5?5:item.studyhot)" :key="key"></i>
							</div>
							<div class="module-one-study-num">{{item.studystudy}}人已学习</div>
						</div>
					</div>
				</div>
			</div>
			<div class="module-two">
				<div class="module-two-card" v-for="(item,index) in studyhotlistinfo" :key="index">
					<div class="module-two-card-pic">
						<img :src="item.studythumbnail" alt="">
					</div>
					<div class="module-two-card-title">
						{{ item.studyname+item.studyabstract }}
					</div>
					<div class="module-two-card-tags">
						<span v-for="(val,key) in item.labellist" :key="key">
								{{ val.labelname }}
							</span>
					</div>
					<div class="module-two-card-bottom">
						<div class="module-two-card-hot">
							<span>热度：</span>
							<i v-for="(val,key) in (item.studyhot>5?5:item.studyhot)" :key="key"></i>
						</div>
						<div class="module-two-card-study-num">{{item.studystudy}}人已学习</div>
					</div>
				</div>
			</div>
			<div class="module-study-area">
				<div class="module-study-area-header">
					<div class="go-home">
						<i></i>
						<span>去学友圈首页</span>
					</div>
					<div class="fresh" @click="getstudyfriendlist">
						<span>学习热点刷一刷</span>
						<i></i>
					</div>
				</div>
				<div class="module-study-area-body">
					<div class="module-study-area-item" v-for="(item,index) in studyfriendlistinfo" :key="index">
						<div class="module-study-area-item-header">
							<div class="module-study-area-info">
								<div class="module-study-area-avatar">
									<img :src="item.userbase.user_head" alt="">
								</div>
								<div class="module-study-area-name">{{ item.userbase.user_name }}</div>
							</div>
							<div class="module-study-area-progress">
								{{item.studyprogress}}/{{item.studycount}}
							</div>
						</div>
						<div class="module-study-area-item-desc">
							{{ item.studymessage }}
						</div>	
						<div class="module-study-area-item-pic">
							<div class="module-study-area-item-pic-item pic-one">
								<img :src="item.studythumbnail" alt="">
							</div>
						</div>
						<div class="module-study-area-item-tag">
							<div class="module-study-area-item-tag-shuyou 
								module-study-area-item-tag-item" v-for="(val,key) in item.labellist" :key="key">
								<i></i>
								<span>{{val.labelname}}</span>
								<i></i>
							</div>
						</div>
						<div class="module-study-area-item-footer">
							<div class="module-study-area-item-share">
								<i></i>
								<span>分享</span>
							</div>
							<div class="module-study-area-item-comment">
								<i></i>
								<span>评论</span>
							</div>
							<div :class="['module-study-area-item-collect',{'module-study-area-item-collected':item.iscollect===1}]"
								@click="collect(item)">
								<i></i>
								<span>收藏</span>
							</div>
						</div>	
					</div>
				</div>
			</div>
		</div>
		<footer-bar></footer-bar>
	</div>
</template>
<style lang="scss" scoped>
.container {
	width: 100%;
	background: url(../../assets/images/studyBg.png) repeat center center/100%;
}

.module-container {
	width: 1520px;
	margin: 0 auto;
}

.module {
	&-number {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40px;

		&-item {
			width: 25%;
			height: 200px;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			text-align: center;
		}

		&-item+&-item {
			border-left: 1px solid #00454A;
		}

		&-num1 {
			width: 180px;
			margin: 0 auto;
			border-bottom: 1px solid #00454A;
		}

		&-num1,
		&-num2 {
			font-family: MiSansVF_Semibold;
			font-size: 30px;
			color: #00454A;
			line-height: 39px;
			padding: 10px;
			box-sizing: border-box;
		}

		&-desc {
			font-size: 12px;
			color: rgba(0, 0, 0, 0.5);
			line-height: 16px;
		}
	}

	&-one {
		&-body {
			display: flex;
		}

		&-header {
			display: flex;
			justify-content: flex-end;

			.fresh {
				height: 65px;
				border-radius: 32.5px;
				padding: 0 30px;
				display: flex;
				align-items: center;
				cursor: pointer;

				span {
					font-family: MiSansVF_Medium;
					font-size: 20px;
					color: #000000;
					line-height: 27px;
					margin-right: 19px;
				}

				i {
					display: block;
					width: 27px;
					height: 30px;
					background: url(../../assets/icons/fresh.png)no-repeat center center/100%;
				}
			}

			.fresh:hover {
				background-color: rgba(0, 0, 0, 0.05);
			}
		}

		&-item {
			width: 344px;
			height: 688px;
			background: #FFFFFF;
			box-shadow: 0px 6px 20px 2px rgba(0, 0, 0, 0.1);
			border-radius: 20px;
			padding: 24px;
			box-sizing: border-box;
			margin-top: 48px;
			margin-bottom: 50px;
		}

		&-tags {
			height: 31px;
			display: flex;
			align-items: center;
			margin-top: 24px;

			span {
				font-family: MiSansVF_Medium;
				font-size: 14px;
				color: #01444A;
				line-height: 19px;
				padding: 6px 20px;
				box-sizing: border-box;
				border-radius: 24px;
				background: rgba(#01444A, 0.1);
			}

			span+span {
				margin-left: 10px;
			}
		}

		&-bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 18px;
		}

		&-hot {
			display: flex;

			span {
				font-family: MiSansVF_Medium;
				font-size: 14px;
				color: rgba(0, 0, 0, 0.5);
				line-height: 24px;
			}

			i {
				display: block;
				width: 15px;
				height: 18px;
				background: url(../../assets/icons/hot.png)no-repeat center center/100%;
				margin-left: 10px;
			}
		}

		&-study-num {
			font-family: MiSansVF_Medium;
			font-size: 14px;
			color: rgba(0, 0, 0, 0.5);
			line-height: 19px;
		}

		&-item+&-item {
			margin-left: 48px;
		}

		.module-one-text {
			width: 296px;
			margin-top: 24px;
		}

		.module-one-img {
			width: 296px;
			border-radius: 20px;
		}

		.module-one-title {
			
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-line-clamp: 4;
			display: -webkit-box;
			-webkit-box-orient: vertical;
		}

		.module-one-comment {
			font-family: MiSansVF_Medium;
			font-size: 14px;
			color: #01A9B9;
			line-height: 24px;
			text-align: justify;
			margin-top: 23px;
			height: 244px;
			background: #DAF3F5;
			border-radius: 5px;
			background-color: rgba($color: #DAF3F5, $alpha: .2);
			padding: 12px 15px 15px;
		}

		.module-one-desc {
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-line-clamp: 8;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			margin-top: 10px;
		}

		&-img img {
			display: block;
			width: 100%;
			height: 100%;
			border-radius: 20px;
		}

		&-title {
			font-family: MiSansVF_Medium;
			font-size: 18px;
			color: #000000;
			line-height: 24px;
			height:48px;
		}

		&-desc {
			font-family: MiSansVF_Medium;
			font-size: 14px;
			color: rgba(0, 0, 0, 0.5);
			line-height: 24px;
			height:44px;
		}

		&-item:nth-child(4n+1) {
			.module-one-img {
				height: 148px;
			}

			.module-one-desc {
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}

			.module-one-title {
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}

			.module-one-comment {
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 9;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}
		}

		&-item:nth-child(4n+2) {
			.module-one-img {
				height: 310px;
			}

			.module-one-desc {
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}

			.module-one-title {
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}

			.module-one-comment {
				height: 86px;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 3;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}
		}

		&-item:nth-child(4n+3) {
			.module-one-img {
				height: 148px;
				margin-top: 23px;
			}

			.module-one-desc {
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}

			.module-one-title {
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}

			.module-one-comment {
				height: 220px;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 9;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}
		}

		&-item:nth-child(4n+4) {
			.module-one-img {
				height: 275px;
				margin-top: 30px;
			}

			.module-one-desc {
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}

			.module-one-title {
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}

			.module-one-comment {
				height: 86px;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 3;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}
		}
	}

	&-two {
		margin-bottom: 100px;
		width: 1540px;
		margin: 0 auto;

		overflow: hidden;

		&-card {
			width: 344px;
			height: 344px;
			background: #FFFFFF;
			border-radius: 20px;
			padding: 24px;
			margin-right: 48px;
			box-sizing: border-box;
			margin-bottom: 48px;
			float: left;

			&-pic {
				width: 296px;
				height: 148px;
				background: #D8D8D8;
				border-radius: 20px;

				img {
					display: block;
					width: 296px;
					height: 148px;
					background: #D8D8D8;
					border-radius: 20px;
				}
			}

			&-title {
				width: 296px;
				font-family: MiSansVF_Medium;
				font-size: 18px;
				color: #000000;
				line-height: 30px;
				overflow: hidden;
				/*   超出容器的部分影响  */
				white-space: nowrap;
				/*  文本不换行   */
				text-overflow: ellipsis;
				margin-top: 24px;
			}

			&-tags {
				height: 31px;
				display: flex;
				align-items: center;
				margin-top: 24px;

				span {
					font-family: MiSansVF_Medium;
					font-size: 14px;
					color: #01444A;
					line-height: 19px;
					padding: 6px 20px;
					box-sizing: border-box;
					border-radius: 24px;
					background: rgba(#01444A, 0.1);
				}

				span+span {
					margin-left: 10px;
				}
			}

			&-bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 18px;
			}

			&-hot {
				display: flex;

				span {
					font-family: MiSansVF_Medium;
					font-size: 14px;
					color: rgba(0, 0, 0, 0.5);
					line-height: 24px;
				}

				i {
					display: block;
					width: 15px;
					height: 18px;
					background: url(../../assets/icons/hot.png)no-repeat center center/100%;
					margin-left: 10px;
				}
			}

			&-study-num {
				font-family: MiSansVF_Medium;
				font-size: 14px;
				color: rgba(0, 0, 0, 0.5);
				line-height: 19px;
			}
		}

		&-card:nth-child(4n+4) {
			margin-right: 0;
		}
	}
	&-study-area{
		margin-bottom: 100px;
		&-header{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.fresh {
				height: 65px;
				border-radius: 32.5px;
				padding: 0 30px;
				display: flex;
				align-items: center;
				cursor: pointer;

				span {
					font-family: MiSansVF_Medium;
					font-size: 20px;
					color: #000000;
					line-height: 27px;
					margin-right: 19px;
				}

				i {
					display: block;
					width: 27px;
					height: 30px;
					background: url(../../assets/icons/fresh.png)no-repeat center center/100%;
				}
			}

			.fresh:hover {
				background-color: rgba(0, 0, 0, 0.05);
			}
			.go-home {
				height: 65px;
				border-radius: 32.5px;
				padding: 0 30px;
				display: flex;
				align-items: center;
				cursor: pointer;

				span {
					font-family: MiSansVF_Medium;
					font-size: 20px;
					color: #000000;
					line-height: 27px;
					margin-left: 20px;
				}

				i {
					display: block;
					width: 15px;
					height: 28px;
					background: url(../../assets/icons/left.png)no-repeat center center/100%;
				}
			}

			.go-home:hover {
				background-color: rgba(0, 0, 0, 0.05);
			}
		}
		&-body{
			display: flex;
			margin-top: 48px;
		}
		&-item-header{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}&-item+&-item{
			margin-left: 48px;
		}
		&-item{
			width: 344px;
			height: 688px;
			background: #FFFFFF;
			border-radius: 20px;
			padding: 24px;
			box-sizing: border-box;
			cursor: pointer;
			&-desc{
				width: 296px;
				height: 168px;
				font-family: MiSansVF_Medium;
				font-size: 14px;
				color: #000000;
				line-height: 24px;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 7;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				margin-top: 20px;
			}
			&-pic{
				width: 296px;
				height: 296px;
				margin-top: 15px;
				overflow: hidden;
				.pic-one{
					width: 296px;
					height: 296px;
				} 
				.pic-more{
					width: 143px;
					height: 143px;
					margin-bottom: 10px;
					float: left;
				} 
				.pic-more:nth-child(2n+1){
					margin-right: 10px;
				}
				img{
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			&-tag{
				display: flex;
				margin-top: 15px;
				&-item{
					padding: 0 15px;
					height: 31px;
					line-height: 31px;
					background: rgba($color: #000000, $alpha: .05);
					border-radius: 15px;
				}
				&-item+&-item{
					margin-left: 15px;
				}
			}
			&-footer{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 20px;
				span{
					font-family: MiSansVF_Medium;
					font-size: 16px;
					color: #678092;
					line-height: 22px;
				}
				i{
					display: block;
					width: 24px;
					height: 24px;
					margin-right: 10px;
				}
			}
			&-share{
				cursor: pointer;
				display: flex;
				i{
					background: url(../../assets/icons/share.png) no-repeat center center/100%;
				}
			}
			&-comment{
				cursor: pointer;
				display: flex;
				i{
					background: url(../../assets/icons/pinglun.png) no-repeat center center/100%;
				}
			}
			&-collect{
				width: 106px;
				height: 36px;
				cursor: pointer;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 18px;
				i{
					background: url(../../assets/icons/shoucang.png) no-repeat center center/100%;
				}
			}
			&-collected{
				background-color: rgba(0, 0, 0, 0.05);
			}
			&-share:hover{
				i{
					background: url(../../assets/icons/shareA.png) no-repeat center center/100%;
				}
				span{
					color: #45A1FF;
				}
			}
			&-comment:hover{
				i{
					background: url(../../assets/icons/pinglunA.png) no-repeat center center/100%;
				}
				span{
					color: #45A1FF;
				}
			}
			&-collect:hover{
				i{
					background: url(../../assets/icons/shoucangA.png) no-repeat center center/100%;
				}
				span{
					color: #45A1FF;
				}
			}
		}
		&-info{
			display: flex;
			align-items: center;
		}
		&-avatar{
			width: 50px;
			height: 50px;
			border-radius: 50%;
			img{
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		&-name{
			font-family: MiSansVF_Medium;
			font-size: 18px;
			color: #000000;
			line-height: 24px;
			margin-left: 15px;
		}
		&-progress{
			font-family: MiSansVF_Medium;
			font-size: 14px;
			color: rgba(0, 0, 0, 0.5);
			line-height: 19px;
		}
	}
}

::v-deep(.el-checkbox) {
	display: block;
	height: 48px;
}
</style>
